<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false" content="Hosts">
    <a-row :gutter="16">
      <a-col :span="5" v-for="item in dataList">
        <a-card :body-style="{padding: '8px 12px;'}" style="width: 300px" :bordered="true" >
          <p class="host" v-text="item.host"></p>
          <p>host tag: <a v-if="!item.tag" style="color: red" @click="toUpdate('tag', item.host)">请设置</a><span v-text="item.tag"></span></p>
          <p>project: <a v-if="!item.projectName" style="color: red" @click="toUpdate('project', item.host)">请设置</a><span v-text="item.projectName"></span></p>
          <p>os: <span v-text="item.system"></span></p>
          <p>cpu core: <span v-text="item.cpuCount"></span></p>
          <p>cpu use: <a-tag :color="colorByNum(item.cpuUse)" v-text="item.cpuUse"> </a-tag></p>
          <p>memory: <span v-text="item.memory"></span></p>
          <p>memory use: <a-tag :color="colorByNum(item.memoryUse)" v-text="item.memoryUse"> </a-tag></p>
        </a-card>
      </a-col>
    </a-row>

    <a-modal v-model="hostTagModal" title="设置主机标签" ok-text="确认" cancel-text="取消" @ok="setHostTag">
      <a-input placeholder="host tag" v-model="hostTag"/>
    </a-modal>
    <a-modal v-model="projectSelectModal" title="设置所属项目" ok-text="确认" cancel-text="取消" @ok="setHostProject">
      <a-select v-model="hostProjectId" style="width: 400px">
        <a-select-option v-for="(item, index) in projectList" :key="index" :value="item.id">{{item.projectName}}</a-select-option>
      </a-select>
    </a-modal>
  </page-header-wrapper>

</template>

<script>
  import { getAgentList , setHostProject , setHostTag } from '@/api/agent'
  import { getProjectList } from '@/api/logstash_project'

  export default {
    name: 'AgentList',
    data () {
      return {
        dataList: [],
        projectList: [],
        hostTag: "",
        hostTagModal: false,
        currHost: "",
        hostProjectId: null,
        projectSelectModal: false
      }
    },
    methods: {
      loadData () {
        const me = this
        getAgentList().then(res => {
          if (res.code === 200) {
            me.dataList = res.data
          }
        })
      },
      colorByNum (n) {
        n = Number(n.replace("%", ""))
        if(n >= 70){
          return "red"
        }else if(n >= 50){
          return "orange"
        }else{
          return "green"
        }
      },
      toUpdate (type, host) {
        if(type == 'tag'){
          this.hostTagModal = true
        }else if(type == "project"){
          this.projectSelectModal = true
        }
        this.currHost = host
      },
      setHostTag () {
        if(this.hostTag.trim() == ''){
          this.$message.error('请输入标签')
        } else if(this.hostTag.trim().length > 20){
          this.$message.error('标签长度太长')
        } else {
          setHostTag({
            host: this.currHost,
            tag: this.hostTag.trim()
          }).then(res => {
            this.$message.success('设置成功')
            this.hostTagModal = false
            this.loadData()
          })
        }
      },
      setHostProject () {
        if(!this.hostProjectId){
          this.$message.error('请选择所属项目')
        } else {
          setHostProject({
            host: this.currHost,
            projectId: this.hostProjectId
          }).then(res => {
            this.$message.success('设置成功')
            this.projectSelectModal = false
            this.loadData()
          })
        }
      },
      getProjectList () {
        getProjectList().then(res => {
          this.projectList = res.data
          console.log(this.projectList)
        })
      }
    },
    mounted () {
      this.loadData()
    },
    created() {
      this.getProjectList()
    }
  }
</script>
<style>
  .host {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }
</style>
